<!-- 基本药物总数/使用占比 -->
<template>
    <div id="essentialDrugs"></div>
</template>
<script>
import * as echarts from "echarts";
import { getEssentialDrugsData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        this.setEcharts();
    },
    methods: {
        //设置echarts
        setEcharts() {
            let essentialDrugs = echarts.init(
                document.getElementById("essentialDrugs")
            );
            var data = [
                {
                    name: "人民医院",
                    percent: 0,
                    number: 0,
                },
                {
                    name: "二院",
                    percent: 0,
                    number: 0,
                },
                {
                    name: "中医院",
                    percent: 0,
                    number: 0,
                },
                {
                    name: "妇幼保健",
                    percent: 0,
                    number: 0,
                },
                {
                    name: "乡镇卫生院",
                    percent: 0,
                    number: 0,
                },
            ];
            let responseData = [{ VALUE1: Mock.Random.integer(5500, 15000), VALUE2: Mock.Random.float(12, 80, 1, 2) },
            { VALUE1: Mock.Random.integer(4200, 12000), VALUE2: Mock.Random.float(10, 80, 1, 2) },
            { VALUE1: Mock.Random.integer(4100, 13000), VALUE2: Mock.Random.float(10, 80, 1, 2) },
            { VALUE1: Mock.Random.integer(4000, 10000), VALUE2: Mock.Random.float(15, 80, 1, 2) },
            { VALUE1: Mock.Random.integer(1000, 5000), VALUE2: Mock.Random.float(10, 80, 1, 2) }]
            responseData.forEach((item, index) => {
                data[index].number = parseInt(item.VALUE1);
                data[index].percent = parseInt(
                    // item.VALUE2.substring(0, item.VALUE2.length - 1)
                    item.VALUE2
                );
            });
            var titleArr = [],
                seriesArr = [];
            var colors = [
                ["#389af4", "#05325F"],
                ["#ff8c37", "#05325F"],
                ["#ffc257", "#05325F"],
                ["#fd6f97", "#05325F"],
                ["#a181fc", "#05325F"],
            ];
            var centerArr = [
                ["15%", "20%"],
                ["45%", "20%"],
                ["75%", "20%"],
                ["30%", "68%"],
                ["60%", "68%"],
            ];

            var textCenterArr = [
                ["14%", "42%"],
                ["44%", "42%"],
                ["74%", "42%"],
                ["29%", "90%"],
                ["59%", "90%"],
            ];
            data.forEach(function (item, index) {
                titleArr.push({
                    text: item.name,
                    left: textCenterArr[index][0],
                    top: textCenterArr[index][1],
                    textAlign: "center",
                    textStyle: {
                        fontWeight: "normal",
                        fontSize: "16",
                        color: colors[index][0],
                        textAlign: "center",
                    },
                });
                seriesArr.push({
                    name: item.name,
                    type: "pie",
                    clockWise: false,
                    radius: [43, 52],
                    itemStyle: {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            shadowBlur: 0,
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                        },
                    },
                    hoverAnimation: false,
                    center: centerArr[index],
                    data: [
                        {
                            value: item.percent,
                            label: {
                                formatter: function (params) {
                                    return (
                                        item.number +
                                        "{white|" +
                                        "种\n" +
                                        params.percent +
                                        "%}"
                                    );
                                },
                                position: "center",
                                show: true,
                                textStyle: {
                                    fontSize: 17,
                                    fontWeight: "bold",
                                    color: colors[index][0],
                                },

                                rich: {
                                    white: {
                                        color: "#fff",

                                        fontSize: 16,
                                    },
                                },
                            },
                        },
                        {
                            value: 100 - item.percent,
                            name: "invisible",
                            itemStyle: {
                                normal: {
                                    color: colors[index][1],
                                },
                                emphasis: {
                                    color: colors[index][1],
                                },
                            },
                        },
                    ],
                });
            });

            let option = {
                title: titleArr,
                series: seriesArr,
            };
            essentialDrugs.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#essentialDrugs {
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
</style>